<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="params.name"
        placeholder="员工姓名"
        clearable
        size="small"
        style="width: 180px"
        class="filter-item"
        @change="handleSearch"
        @clear="handleSearch"
      >
        <i
          slot="prefix"
          class="el-input__icon el-icon-search"
          @click="handleSearch"
        />
      </el-input>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        @click="handleAdd"
      >
        <i class="el-icon-edit" />
        添加
      </el-button>
    </div>
    <el-table :data="list">
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="name" width="120" label="姓名" />
      <el-table-column prop="username" width="120" label="账号" />
      <el-table-column prop="phone" width="150" label="手机号" />
      <el-table-column prop="sex" width="80" label="性别">
        <template slot-scope="{ row }">
          <span v-if="row.sex === '1'">男</span>
          <span v-else-if="row.sex === '2'">女</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="idNumber" width="180" label="身份证号" />
      <el-table-column prop="status" label="账号状态">
        <template slot-scope="{ row }">
          <el-tag v-if="row.status === 1" type="success">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="250">
        <template slot-scope="{ row }">
          <div>创建时间：{{ row.createTime }}</div>
          <div>更新时间：{{ row.updateTime }}</div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
        style="display: flex"
      >
        <template slot-scope="{ row }">
          <div style="display: flex">
            <el-button
              type="primary"
              size="small"
              link
              @click="handleUpdate(row)"
            >
              编辑
            </el-button>
            <el-button
              v-if="row.status === 1"
              type="danger"
              size="small"
              link
              @click="handleDisable(row)"
            >
              禁用
            </el-button>
            <el-button
              v-else
              type="success"
              size="small"
              link
              @click="handleEnable(row)"
            >
              启用
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      :page.sync="params.page"
      :size.sync="params.pageSize"
      @pagination="loadData"
    />
    <edit
      v-if="editDrawer"
      :value.sync="editDrawer"
      :row="currentRow"
      @success="success"
      @closed="editDrawer = false"
    />
  </div>
</template>

<script>
import edit from './edit.vue'
import { MessageBox, Message } from 'element-ui'
import { pageList, updateEmployee } from '@/api/employee'
import Pagination from '@/components/Pagination/index.vue'
import { debounce } from 'lodash'
export default {
  name: 'Employee',
  components: {
    edit,
    Pagination
  },
  data() {
    return {
      currentRow: {},
      editDrawer: false,
      list: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 20,
        name: ''
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      pageList(this.params).then((res) => {
        const { data } = res
        this.total = data.total || 0
        this.list = data.records
      })
    },
    // 防抖：在首次调用时立即触发一次，之后两秒内无论调用多少次都不会再触发。两秒之后再次调用，依然是立刻触发。
    handleSearch: debounce(function() {
      this.loadData()
    }, 2000, { leading: true, trailing: false }),
    // handleSearch() {
    //   this.loadData()
    // },
    handleAdd() {
      this.editDrawer = true
      this.currentRow = null
    },
    handleUpdate(row) {
      this.editDrawer = true
      this.currentRow = row
    },
    handleDisable(row) {
      MessageBox.confirm('确定禁用吗?', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      })
        .then(() => {
          updateEmployee({ id: row.id, status: 0 })
            .then((res) => {
              Message({
                message: '禁用成功',
                type: 'success'
              })
              this.loadData()
            })
            .catch((err) => {
              Message({
                message: err.msg,
                type: 'info'
              })
            })
        })
        .catch(() => {
          Message({
            type: 'info',
            message: '取消禁用'
          })
        })
    },
    handleEnable(row) {
      updateEmployee({ id: row.id, status: 1 }).then((res) => {
        Message({
          message: '启用成功',
          type: 'success'
        })
        this.loadData()
      })
    },
    success() {
      this.editDrawer = false
      this.loadData()
    }
  }
}
</script>

<style scoped lang="scss">
.filter-container {
  .el-input {
    i {
      cursor: pointer;
    }
  }
}
</style>
